<template >
  <div class="pi">

    <div class="head">
      <export-excel module-name="businessform_pi" file-name="PI.xlsx"></export-excel>
      <h2>PI</h2>
      <div class="head-ctrl">
        <div class="order-number">
          {{businessformNO}}
        </div>
        <!-- <el-button type="primary">导出</el-button> -->
      </div>
    </div>

    <div class="pi-head">
      <img class="tcf-png" src="../../../../assets/img/tcf.png" alt="">
      <p><span>TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</span></p>
      <p>NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE</p>
      <p>TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA"</p>
      <h2>PROFORMA INVOICE</h2>
    </div>

    <div class="pi-head-2">
      <el-form :inline="true">
        <el-form-item label="Company: ">
          <input class="address-input relate-color" placeholder="请输入相关内容" @input="handleSimpleInput('bp_company', $event)"   :readonly="!editable"  v-model="bp_company" />
        </el-form-item>

        <el-form-item label="No: ">
          <input class="address-input relate-color"  placeholder="请输入相关内容" @input="handleSimpleInput('bp_no', $event)"    :readonly="!editable"  v-model="bp_no">
        </el-form-item>
        <el-form-item label="Address: ">
          <input class="address-input relate-color" placeholder="请输入相关内容" @input="handleSimpleInput('bp_address', $event)"    :readonly="!editable"  v-model="bp_address">
        </el-form-item>

        <el-form-item label="Date: ">
          <el-date-picker class="relate-color" value-format="yyyy-MM-dd" :disabled="!editable" @change="selectDate"    v-model="bp_date" ></el-date-picker>
        </el-form-item>
      </el-form>

      <!-- <el-form :inline="true">
        <el-form-item  label="Trade Term: ">
          <el-input  placeholder="请输入相关内容"    :readonly="!editable"  v-model="data.bp_tradeTerm" ></el-input>
        </el-form-item>
      </el-form> -->
    </div>

      <!-- :summary-method="getTableSummaries" show-summary -->
    <div class="pi-table">
      <p class="table-title">
        <span>Ⅰ. PRICE INFORMATION	</span></p>
      <el-table :data="bp_table1"   border style="width: 100%">

        <el-table-column type="index" label="Item" :index="indexMethod"></el-table-column>

        <el-table-column prop="bp_table1_products" label="Products" min-width="100">
          <template slot-scope="scope">
            <span  class="cell-edit-input">

              <el-tooltip effect="dark"  :content="scope.row.bp_table1_products || '暂无内容'"  placement="top">
                <input  placeholder="请输入相关内容"    :readonly="!editable" @input="handleTableInput(scope, 'bp_table1_products', $event)"  v-model="scope.row.bp_table1_products"/>
              </el-tooltip>

            </span>
          </template>
        </el-table-column>

        <el-table-column prop="bp_table1_hscode" label="HS CODE" min-width="100">
          <template slot-scope="scope">
            <span  class="cell-edit-input">
              <el-tooltip effect="dark"  :content="scope.row.bp_table1_hscode || '暂无内容'"  placement="top">
                <input  placeholder="请输入相关内容" @input="handleTableInput(scope, 'bp_table1_hscode', $event)"    :readonly="!editable"  v-model="scope.row.bp_table1_hscode"/>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="bp_table1_description" label="Model Description" min-width="100">
          <template slot-scope="scope">
            <span  class="cell-edit-input">
              <el-tooltip effect="dark"  :content="scope.row.bp_table1_description || '暂无内容'"  placement="top">
                <input  placeholder="请输入相关内容" @input="handleTableInput(scope, 'bp_table1_description', $event)"    :readonly="!editable"  v-model="scope.row.bp_table1_description" />
              </el-tooltip>
            </span>
          </template>
        </el-table-column>


        <el-table-column label="Quantity" min-width="100">
          <el-table-column prop="bp_table1_quantity" label="PSD">
            <template slot-scope="scope">
              <span  class="cell-edit-input">
                <input type="number"  placeholder="请输入相关内容" @input="handleTableInput(scope, 'bp_table1_quantity', $event)"    :readonly="!editable"  v-model="scope.row.bp_table1_quantity" />
              </span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="Unit Price" :min-width="200" :render-header="currencySel('Unit Price')">
          <el-table-column prop="bp_table1_price" label="USD"  :render-header="currentSelEN('')">
            <template slot-scope="scope">
              <span  class="cell-edit-input">
                <input type="number"  placeholder="请输入相关内容" @input="handleTableInput(scope, 'bp_table1_price', $event)"    :readonly="!editable"  v-model="scope.row.bp_table1_price" />
              </span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column   label="Total price" min-width="100">
          <el-table-column prop="bp_table1_lineAmount" label="USD" :render-header="currentSelEN('')">
            <template slot-scope="scope">
              <span  class="cell-edit-input">
                <input type="number"  placeholder="请输入相关内容" @input="handleTableInput(scope, 'bp_table1_lineAmount', $event)"    :readonly="!editable"  v-model="scope.row.bp_table1_lineAmount" />
              </span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column
        v-if="editable"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="addNewLine(scope.$index, bp_table1)" type="text" size="small">添加</el-button>
          <el-button @click="removeCurrentLine(scope.$index, bp_table1)" type="text" size="small">移除</el-button>
        </template>
      </el-table-column>
      </el-table>
    </div>



    <div class="extra-table">
         <el-row class="extra-money">
            <el-col :span="8"><div>Total</div></el-col>
            <el-col :span="8"><div>&nbsp;</div></el-col>
            <el-col :span="8">
              <input v-model="bp_table1_amount" type="number" @input="handleSimpleInput('bp_table1_amount', $event)"/>
            </el-col>
         </el-row>
          <el-row class="extra-money">
            <el-col :span="8"><div>Deposit定金</div></el-col>
            <el-col :span="8"><div>&nbsp;</div></el-col>
            <el-col :span="8"><input v-model="bp_depositMoney" @input="handleSimpleInput('bp_depositMoney', $event)"/></el-col>
         </el-row>

        <el-row class="extra-money">
            <el-col :span="8"><div>Balance 尾款</div></el-col>
            <el-col :span="8"><div>&nbsp;</div></el-col>
            <el-col :span="8"><div><input v-model="bp_balanceMoney" @input="handleSimpleInput('bp_balanceMoney', $event)"/></div></el-col>
         </el-row>
    </div>


      <div class="pi-head-3">
      <p class="table-title"><span>Ⅱ.TRADING TERMS</span></p>
      <p class="table-title">
        <span>1.Country of Origin: </span>
         <input type="text" v-model="bp_countryOrigin" @input="handleSimpleInput('bp_countryOrigin', $event)" placeholder="请输入相关内容" >
      </p>

      <p class="table-title">
        <span>2. Trade Terms：</span>
         <input type="text" v-model="bp_tradeTerm" @input="handleSimpleInput('bp_tradeTerm', $event)" placeholder="请输入相关内容" >
      </p>

      <p class="table-title"><span>3.Payment Term:	</span></p>
      <p>3.1Contract Deposit 
        <span class="inline-span">{{bp_depositMoney}}</span>
      <p>
        The buyer shall pay the deposit within 2 weeks from the date of contract signed. 
        If the deal cannot be continued for any reason by the buyer, the seller will not refund
         the deposit unless the seller's supplier has made the refund in advance.					
      </p>

      <p>3.2 Balance Payment
        <span class="inline-span">{{bp_balanceMoney}}</span>
      <p>
          The buyer shall pay the balance within 90 days started from the day appointed by 《Payment Notice》. 
          If the buyer delay to pay the balance, should be fined by interest of  0.5% of the balance amount per day.									
      </p>

      <p>3.3. Beneficiary Payment Route</p>
      <p>
        <span>Beneficiary Company：	</span>
        <input type="text"  placeholder="请输入相关内容" @input="handleSimpleInput('bp_benCompany', $event)" :readonly="!editable" v-model="bp_benCompany">
      </p>

      <p>
        <span>Account No: 		</span>
        <input type="text" placeholder="请输入相关内容"  @input="handleSimpleInput('bp_AccountNo', $event)" :readonly="!editable"  v-model="bp_AccountNo">
      </p>

      <p>
        <span>Company Address:	</span>
        <input type="text" placeholder="请输入相关内容"  @input="handleSimpleInput('bp_CompanyAddress', $event)" :readonly="!editable"   v-model="bp_CompanyAddress">
      </p>

      <p>
        <span>Bank：	</span>
        <input type="text" placeholder="请输入相关内容" @input="handleSimpleInput('bp_bank', $event)"  :readonly="!editable"  v-model="bp_bank">
      </p>

      <p>
        <span>Bank address: 		</span>
        <input type="text" placeholder="请输入相关内容" @input="handleSimpleInput('bp_bankAddress', $event)" :readonly="!editable"  v-model="bp_bankAddress">
      </p>

      <p>
        <span>SWIFT CODE:	</span>
        <input type="text" placeholder="请输入相关内容" @input="handleSimpleInput('bp_swiftCode', $event)" :readonly="!editable"  v-model="bp_swiftCode">
      </p>

      <p>
        Remark: The Buyer must indicate the sales contract number, invoice number and payment purpose (e.g. deposit/prepayment/balance payment, etc.) in the bank slip.	
      </p>


        <p class="table-title"><span>4.COUNTRY AND MANUFACTURERS:</span> <input  placeholder="请输入相关内容" @input="handleSimpleInput('bp_countryAndManu', $event)"   :readonly="!editable"  v-model="bp_countryAndManu"/></p>
        <p class="table-title"><span>5.PACKING:</span> <input type="text" placeholder="请输入相关内容" @input="handleSimpleInput('bp_packing', $event)"  :readonly="!editable"  v-model="bp_packing"  /></p>
        <p class="table-title"><span>6.PORT OF DESTINATION：</span><input  placeholder="请输入相关内容" @input="handleSimpleInput('bp_portOfDestination', $event)"   :readonly="!editable"  v-model="bp_portOfDestination" /></p>
        <p class="table-title"><span>7.INSURANCE：</span> <input  placeholder="请输入相关内容"  @input="handleSimpleInput('bp_insurance', $event)"  :readonly="!editable"  v-model="bp_insurance" /> </p>
      </div>



  <div class="upload">
    <p class="upload-hint">票据/附件</p>
    <div>
      <div class="upload-btn">
        <input type="file"  v-show="editable"  name="file" multiple @change="selectFiles" >
        <el-button :disabled="!editable"  type="primary">选择附件</el-button>
      </div>

      <ul class="upload-files">
        <li @mouseover="handleOver(item)" :key="index"   @mouseout="handleOut(item)" v-for="(item,index) in attachedFiles">
          <span @click="download(item.id, $event)">{{item.name}}</span>
          <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
          <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
        </li>
      </ul>
    </div>
  </div>

  </div>

</template>

<script>

import {uploadFiles} from '@/server/initiatingprocess';
import {filedownload , deleteFile} from '@/server/customermanagement/index.js'
import {toFixed} from '@/util/transform.js';
import {handleEmit} from '../common.js';
import exportExcel from '../../common/exportExcel.vue';

export default {

  created(){
    const self = this;

    //将props获取的数据赋值给当前组件
    this.keys.forEach(key => {
      this[key] = _.cloneDeep(this.datas[key]);
    });

    //接收外贸合同的表格的添加，删除
    this.bus.$on("pi-table", function(arg){

      let index = arg[1];
      let srcData = arg[2];


      if (arg[0] === 'add') {
        //添加
        let  data = {
            bp_table1_products: srcData.bf_table1_product,
            bp_table1_hscode: '',
            bp_table1_description: srcData.bf_table1_description,
            bp_table1_quantity: srcData.bf_table1_quantity,
            bp_table1_price: srcData.bf_table1_price,
            bp_table1_lineAmount: srcData.bf_table1_lineAmount
        }; 

        if ((index - self.bp_table1.length) >= 1) {
          self.bp_table1.push(data);
        } else {
          self.bp_table1.splice(index, 0, data);
        }

      } else if(arg[0] === 'delete'){
        //删除
        if (self.bp_table1.length - 1 >= index) {
          self.bp_table1.splice(index, 1);
        }
      }

      self.bp_table1_amount = self.computedTableTotal(self.bp_table1);
      self.emitToParent();
    });



    //接收外贸合同 的单元格修改时
    this.bus.$on("pi-table-line", function(arg){

      let lineIndex = arg[0], key = self.prevMapCur[arg[1]];
      let srcData = arg[2];

      //表格有该索引时，才进行修改
      if (lineIndex  <= (self.bp_table1.length - 1)) {
        let temp = _.cloneDeep(self.bp_table1[lineIndex]);
        temp[key] = srcData;

        // if (key === "bp_table1_price" || key === "bp_table1_quantity") {
        //   temp.bp_table1_lineAmount = toFixed(Number(temp.bp_table1_quantity) * Number(temp.bp_table1_price));
        //   self.bp_table1.splice(lineIndex, 1, temp);
        //   self.bp_table1_amount = self.computedTableTotal(self.bp_table1);
        // } else if (key === "bp_table1_lineAmount") {
        //   self.bp_table1_amount = self.computedTableTotal(self.bp_table1);
        // } else {
        //   self.bp_table1.splice(lineIndex, 1, temp);
        // }

        if (key === 'bp_table1_price'){
          temp[key]  =  toFixed(srcData);
          temp.bp_table1_lineAmount = toFixed(Number(temp.bp_table1_quantity) * Number(temp.bp_table1_price));
          self.bp_table1.splice(lineIndex, 1, temp);
          self.bp_table1_amount = self.computedTableTotal(self.bp_table1);
          
        } else if (key === 'bp_table1_quantity'){
          temp[key]  =  Number.isNaN(parseInt(srcData).toString()) ? '0' : parseInt(srcData).toString();
          temp.bp_table1_lineAmount = toFixed(Number(temp.bp_table1_quantity) * Number(temp.bp_table1_price));
          self.bp_table1.splice(lineIndex, 1, temp);
          self.bp_table1_amount = self.computedTableTotal(self.bp_table1);

        } else if (key === 'bp_table1_lineAmount'){
          temp[key] = toFixed(srcData);
          self.bp_table1.splice(lineIndex, 1, temp);
          self.bp_table1_amount = self.computedTableTotal(self.bp_table1);
          
        } else {
            self.bp_table1.splice(lineIndex, 1, temp);
        }

        self.emitToParent();
      }
    });

    this.bus.$on("pi-buyer-mesg", function(arg){
      self.bp_company = arg[0].bf_buy_name;
      self.bp_address = arg[0].bf_buy_address;
      self.bp_no = arg[0].bf_orderNumber;
      self.emitToParent();
    });

    this.bus.$on("pi-date", function(arg){
      self.bp_date = arg[0];
      self.emitToParent();
    });

    this.bus.$on("pi-currency", function(arg){
      self.bp_currencyValue = arg[0];
      self.emitToParent();
    });

    this.bus.$on("pi-order-number", function(arg){
      self.bp_no = arg[0];
      self.emitToParent();
    });

    this.bus.$on("pi-buyer-address", function(arg){
      self.bp_address = arg[0];
      self.emitToParent();
    });


  },
  methods: {

    /**
     * 数据发生改变时，通知父组件
     */
    emitToParent(){
      let newData = {};
      this.keys.forEach(key => {
        newData[key] = _.cloneDeep(this[key]);
      });
      this.$emit("fromPI", "businessform_pi", newData);
    },

     /**
     *  数据更新之后 通知需要关联的组件
     * @param {String} eventName
     * @param {String} option
     * @param {Array} value
     */
    emitToNext(eventName, ...arg){
      this.bus.$emit(eventName, arg);
    },


    /**
     * 计算表格的金额 总和
     * @param {Array} table
     * @return {String} 
     */
    computedTableTotal(table){
        let amounts = 0;
        table.forEach(line => {
          amounts += Number(line.bp_table1_lineAmount);
        });

        amounts = Number.isNaN(amounts) ? 0  : amounts;
        return toFixed(amounts);
    },

    /**
     * 处理表格的输入框
     */
    handleTableInput(scope, key, event){
      let oldData = _.cloneDeep(this.bp_table1[scope.$index]);

      switch(key) {
          case 'bp_table1_price':
            if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
              oldData[key] =  event.target.value;
              } else {
              oldData[key] =  toFixed(event.target.value);
              }
            oldData.bp_table1_lineAmount = toFixed(oldData.bp_table1_price * oldData.bp_table1_quantity);
            this.bp_table1.splice(scope.$index, 1, oldData);
            this.bp_table1_amount = this.computedTableTotal(this.bp_table1);
            break;
          case 'bp_table1_quantity':
            oldData[key] =  Number.isNaN(parseInt(event.target.value).toString()) ? '0' : parseInt(event.target.value).toString();
            oldData.bp_table1_lineAmount = toFixed(oldData.bp_table1_price * oldData.bp_table1_quantity);
            this.bp_table1.splice(scope.$index, 1, oldData);
            this.bp_table1_amount = this.computedTableTotal(this.bp_table1);
            break;
          
          case 'bp_table1_lineAmount': 
            this.bp_table1_amount = this.computedTableTotal(this.bp_table1);
            break;
      }


        handleEmit(null, ()=> {
          //通知父组件
          this.emitToParent();
        });

    },

    /**
     * 处理其他 input  输入
     */
    handleSimpleInput(key, event){

      if (key ==='bp_table1_amount' || key === 'bp_depositMoney' ||  key === 'bp_balanceMoney' ) {
        if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
        this[key] =  event.target.value;
        } else {
        this[key] =  toFixed(event.target.value);
        }
      }

      handleEmit(null, ()=> {
        this.emitToParent();
      });
    },

    selectDate(value){
      handleEmit(null, ()=> {
        this.emitToParent();
      });
    },

    indexMethod(value){
      let lines = this.bp_table1.length;
      return value + 1;
    },


    selectFiles(event){
      //票据附件
      let self = this;

      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then((resArr)=>{
        resArr.forEach(function(res,i){
          self.attachedFiles.push({name: event.target.files[i].name, status: 1,id: res.data.datas[0].id});
        });
      });
    },
    changeFiles(index,item) {
      deleteFile({'id':item.id}).then((res) => {
        if(res.code != 1 ){
          this.$message.error('删除失败，请检查网络后重试');
        } else {
          this.attachedFiles.splice(index, 1);
        }
      });
    },
    handleOver(item){
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item){
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event){
      window.open('http://47.104.93.41/api/common/download?id='+id);
    },

    addNewLine(currentIndex, table){
      let keys = [
        "bp_table1_products",
        "bp_table1_description",
        "bp_table1_price",
        "bp_table1_lineAmount",
        "bp_table1_quantity"
      ];

      let lastLine = _.cloneDeep(table[currentIndex]), newLine = {};

      keys.forEach(key => {
        newLine[key] = lastLine[key];
      });

      table.splice(currentIndex + 1, 0, newLine);

      handleEmit(null, () => {
        this.emitToParent();
      });
    },
    removeCurrentLine(currentIndex, table){
      if (table.length > 1){
        table.splice(currentIndex, 1);
         handleEmit(null, () => {
           this.emitToParent();
         });
      }
    },

    spanMethod({row, column, rowIndex, columnIndex}){
      let lines = this.data.bp_table1.length;
      if (lines - 1 === rowIndex){
        switch (columnIndex){
          case 0:
          return [1, 6];
          break;
          case 1:
          case 2:
          case 3:
          case 4:
          case 5:
          case 7:
          return [0, 0];
          break;
          case 6:
          return [1,2];
        }
      }
    },


    /**选择币种 */
    currencySel(name){


        return (h, {column, $index}) => {
        let self = this;
        var selAttr = {};
        if (!this.editable){
         selAttr.disabled = 'disabled';
        }
        return  h("div", {
          attrs: {
            class: "select-currency"
          }
        }, [
          h("span", name),
          h("select", {
            attrs: {...selAttr},
            domProps: {
            value: self.bp_currencyValue
          },
          on: {
            change: function(event){
              self.bp_currencyValue = event.target.value;
              handleEmit(null, () => {
                self.emitToParent();
              });
            }
          }
          },[
            h("option", "人民币"),
            h("option", "美元"),
            h("option", "加元"),
            h("option", "欧元"),
          ])
        ]);
      }
    },

    currentSelEN(name){
      return (h, {column, $index}) => {
        let temp;
        switch (this.bp_currencyValue){
          case '人民币':
          temp = 'RMB';
          break;
          case '美元':
          temp = 'USD';
          break;
          case '欧元':
          temp = 'EUR';
          break;
          case '加元':
          temp = 'CAD';
          break;
        }
        return h('div',null, `${name}${temp}`);
      }
    },
  },

  updated(){
  },

  watch: {
    datas(newValue, oldValue){
      //将props获取的数据赋值给当前组件
      this.keys.forEach(key => {
        this[key] = _.cloneDeep(newValue[key]);
      });
    }
  },

  props: {
    businessformNO: {
      type: String,
      required: true
    },
    datas: {
      type: Object,
      required: true
    },
    bus: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      required: true
    }
  },

  data(){
    return {

        id: '',
        formInstId: '',
        
        attachedFiles: [], //票据附件
        bp_countryOrigin: '中国China',
        bp_benCompany: 'TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD	',
        bp_AccountNo: '1000000010120100506972',
        bp_CompanyAddress: 'NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA	',
        bp_bank: 'CHINA ZHESHANG BANK BEIJING BRANCH', 	
        bp_bankAddress: 'NO.1 FINANCIAL STEREET,XICHENG DISTRICT,BEIJING,CHINA',
        bp_swiftCode: 'ZJCBCN2N', 	
        bp_countryAndManu: 'China', //原产地
        bp_packing: 'To be packed in standard packing',
        bp_insurance: 'Without Insurance of the shipment by sea',



        //pi 头部信息
        bp_company: '', // 公司
        bp_no: '', //编号
        bp_address: '', //地址
        bp_date: '', //日期


        bp_portOfLoading: '', //出港地址
        bp_portOfDestination: '', //目的港
        bp_paymentTerm: '', //付款方式,
        bp_tradeTerm: 'EXW', //成交方式

        bp_currencyValue: '人民币',

        bp_depositMoney: 0, //定金
        bp_balanceMoney: 0, //

        bp_table1_amount: 0, //表格金额总和
        //一个表格
        bp_table1: [
          {
            bp_table1_products: '',
            bp_table1_hscode: '',
            bp_table1_description: '',
            bp_table1_quantity: '',
            bp_table1_price: '',
            bp_table1_lineAmount: '',
          }
        ],
        keys: [
          "id",
          "formInstId",
          'attachedFilels',
          'bp_countryOrigin',
          'bp_benCompany',
          'bp_AccountNo',
          'bp_CompanyAddress',
          'bp_bank',
          'bp_bankAddress',
          'bp_swiftCode',
          'bp_countryAndManu',
          'bp_packing',
          'bp_insurance',
          'bp_company',
          'bp_no',
          'bp_address',
          'bp_date',
          'bp_portOfLoading',
          'bp_portOfDestination',
          'bp_paymentTerm',
          'bp_tradeTerm',
          'bp_currencyValue',
          'bp_depositMoney',
          'bp_balanceMoney',
          'bp_table1_amount',
          'bp_table1'
        ],
        prevMapCur: {
        "bf_table1_product": "bp_table1_products",
        'bf_table1_description': "bp_table1_description",
        'bf_table1_price': "bp_table1_price",
        'bf_table1_lineAmount': "bp_table1_lineAmount",
        'bf_table1_quantity': "bp_table1_quantity"
        }
    }
  },
  components: {
      exportExcel
  }
}
</script>

<style lang="scss">
.pi {
  padding: 20px;
  border: 1px solid #999;

  font-size: 15px;
  line-height: 30px;

   .select-currency {
      select {
        margin-left: 12px;
        height: 30px;
        width: 60px;
      }
  }

  p {
    padding: 5px 0;

    span {
      font-weight: bolder;
    }
  }


    .relate-color {
      // background-color: #efa54b36 !important;

      input {
        background-color: transparent !important;
      }
    }


  .export {
    float: right;
  }


  .head {
    h2 {
      text-align: center;
    }

    .head-ctrl {
      height: 60px;
      .order-number {
        padding: 16px 0px;
        float: left;
      }
      button {
        float: right;
      }
    }
  }
  .table-title {
      padding: 10px 0;
  }

  .pi-head {
    text-align: center;
    position: relative;

    h2 {
      padding: 20px;
    }

    .tcf-png {
      position: absolute;
      width: 90px;
      left: 48px;
      top: 6px;
    }
  }

  .pi-head-2 {

    .address-input {
        width: 94%;
        border: 1px solid #999;
        height: 32px;
        border-radius: 4px;
        padding-left: 10px;
    }
    .el-form--inline .el-form-item__label {
      width: 120px;
      text-align: left;
    }

    .el-form--inline .el-form-item {
      margin-right: 100px;
    }
    .el-form-item__content {
      width: 250px;
    }

    .el-date-editor.el-input {
      width: 250px;
    }
  }

  .pi-table {

    td {
      border: 1px solid #e6ebf5;
    }

    .el-table__body-wrapper {
      overflow: hidden;
    }


    .el-table thead.is-group th {
      background: #e6e6e6;
      padding-bottom: 0;
      padding-top: 0;
    }

    .cell {
        height: 100%;
    }
    .cell-edit-input {
       display: block;
       width: 100%;
       height: 100%;

       input {
          width: 100%;
          height:100%;
          border: none;
          outline: none;
          background-color: transparent;
       }



        .el-input__inner {
            border: none;
            background: transparent;
            padding: 0;
            text-align: center;
        }

        .el-input-number__decrease,
        .el-input-number__increase {
            width: 20px;

            border: none;
            background: transparent;
        }

        .el-input-number {
            width: 100%;
            min-width: 80px;
        }
    }

  }


  .extra-table {
          .extra-money {
            border: 1px solid #e6ebf5;
            text-align: center;
            color: #5a5e66;

            &:nth-child(1){
              border-top: none;
            }

            .el-col:nth-child(2){
              border-left: 1px solid #e6ebf5;
              border-right: 1px solid #e6ebf5;
            }

            input {
              width: 90%;
              border: none;
              outline: none;
              text-indent: 1em;
              color: #5a5e66;
            }
          }
  }




  .pi-head-3 {
    .el-input {
      width: 500px;
    }

    input {
      outline: none;
      border: 1px solid #e6ebf5;
      height: 32px;
      border-radius: 2px;
      width: 60%;
      margin-left: 10px;
    }

    .inline-span {
      font-weight: normal;
      display: inline-block;
      margin-left: 50px;
    }
  }

  .upload {
    >div {
      border: 1px solid #999;
      padding: 20px 0px 40px 20px;
    }

    .upload-btn {
      position: relative;
      >input {
        opacity: 0;
        width: 100px;
        height: 40px;
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    .upload-files {

        > li {
            width: 300px;
            padding: 10px 0;
            transition: all 0.5s linear;

            &:hover {

              >span {
                color: #409EFF;
              }
            }
          }

        font-size: 16px;
        span {
            padding: 0 10px;
            cursor: pointer;
            display: inline;
        }
        span.el-icon-close:hover {
            cursor: pointer;
        }
    }
    .upload-hint {
      font-size: 20px;
      margin: 15px 0px  ;
    }
  }

}
</style>
